<div class="lift:surround?with=default;at=content">


	<head_merge>
		<script id="jit" src="/scripts/jit.js" type="text/javascript"/>
		<script id="drawGraph" src="/scripts/drawGraph.js" type="text/javascript"/>
		<script id="draggable" src="/scripts/jquery-ui-1.8.19.draggable.js" text="text/javascript"></script>
	</head_merge>


	<div id="graphData" class="lift:GraphSnippet.graphData">
		<script id="graph_scripts" type="text/javascript">

			<![CDATA[
            function nodeToolTip(node){
           return  "<div class=\"tip-title\">" + node.name + "</div>"
            }

            function onNodeClick(node){
                var html = "<h4>" + node.name + "</h4><b> connections:</b><ul><li>",
                list = [];
                node.eachAdjacency(function(adj){
                list.push(adj.nodeTo.name);
                });
                //append connections information
                $jit.id('inner-details').innerHTML = html + list.join("</li><li>") + "</li></ul>";
            }
            ]]>
		</script>
		<div id="data">
			<script type="text/javascript">
				var json= []
			</script>
		</div>
		<script type="text/javascript">
			var old = window.onload
			window.onload = function(){
			try{drawGraph("your_graph");}
			catch(e){}
			if(old) old();
			}
		</script>
	</div>
	<h2>
		<span id="graph_messages"></span>
	</h2>

	<div class="lift:LeftMenu.menu dashboard">


		<div id="left_menu" class="left_menu"
		     onmouseover="$('#left_menu_content').show();"
		     onmouseout="$('#left_menu_content').hide();">
			<div class="left_menu_content">
				<img src="/images/query.png"/>
			</div>
			<div id="left_menu_content" class="menu_body left_menu_content" style="display:none">


				<script type="text/javascript" id="drag_success">
					<![CDATA[
			        function add_to_end(id){
			            alert("added: " + id);
			        }
			        function remove_from_query(id){
			            alert("removed: " + id);
			        }

			        function move_to_head(id){
			           alert("moved to head " + id);
			        }

        ]]>
				</script>

				<div id="settings">
					<div>
						<a href="javascript://" id="start_crawl">gets Data! </a>
					</div>

					<div>
						<a href="javascript://" id="start_cluseter">recreate clusters! </a>
					</div>
					<div id="premake_query">
						<a href="javascript://" id="do_premake">do premake</a>
					</div>

				</div>

				<div>
					<div id="query" class="menu_column">
						<div id="start_query">Start:</div>
						<div id="sel_items">
							<div id="sel_item" class="query_item_added query_item">Selected</div>
						</div>
						<div id="query_tail">
							Drop it here.
						</div>
						<a href="javascript://" id="showQuery">show query</a>
					</div>

					<div id="items" class="menu_column">
						<h1>Filtry:</h1>

						<div id="item" class="query_item query_item_wait">Selected</div>
					</div>
				</div>
			</div>
		</div>

		<div class="graph_container">
			<div id="your_graph">
			</div>

		</div>

		<div id="right_menu" class="right_menu"
		     onmouseover="$('#right_menu_content').show();"
		     onmouseout="$('#right_menu_content').hide();">
			<div id="button" class="right_menu_content">
				<div id="log"></div>
				<img src="/images/query.png"/>
			</div>
			<div id="right_menu_content" class="right_menu_content menu_body">
				<div id="id-list"></div>
				<div id="inner-details"></div>
			</div>
		</div>

		<script type="text/javascript">
			<![CDATA[

        var in_target=false;
        var in_out=false;

		function makeDnD(){
			$( ".query_item_wait" ).draggable({ revert: "invalid" ,
	                stop: function(){
	                    if(in_target){
	                       add_to_end(this.id);
	                       in_target=false;
	                    }

	                }
			    });

			    $( ".query_item_added" ).draggable({
			        revert: "invalid" ,
	                stop: function(){
	                    if(in_target){
	                       move_to_head(this.id);
	                       in_target=false;
	                    }
	                    else{
	                        if(in_out)
	                            remove_from_query(this.id);
	                    }
	                }
			    });

			$( "#query_tail" ).droppable({
			    accept: ".query_item",
				activeClass: "ui-state-hover",
				hoverClass: "ui-state-active",
				drop: function( event, ui ) {
					in_target = true;
				}
			});

			$( "#items" ).droppable({
			    accept: ".query_item",
				activeClass: "ui-state-hover",
				hoverClass: "ui-state-active",
				drop: function( event, ui ) {
					in_out = true;
				}
			});
		}
		makeDnD();

         ]]>
		</script>
	</div>

</div>